<template>
    <div>
        <ul>
            <li ref="lis" v-for="(item, index) in 10" :key="index" @click="handler(index)">北京{{ index }}</li>
        </ul>
    </div>
    <hr>
    <Child ref="child"></Child>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import Child from './components/Child.vue'
//同名的ref对象
//同名的ref对象可以获取多个DOM元素
const lis = ref();
const handler = (index: number) => {
    //排他思路
    lis.value.forEach((item: any) => {
        item.style.background = "#eee";
    });

    lis.value[index].style.background = 'red';

}
/*************************************************************/
const child = ref();
onMounted(() => {
    console.log("父组件获取儿子的数据",child.value.money);
    child.value.fly('老爸给你买一台法拉利');
});
</script>

<style scoped></style>